header {
    background-image: url(../img/d.jpg);
}

main {
    .content {
        margin-top: 20px;
        width     : 100%;

        .list {
            .list-item {
                width   : 100%;
                height: 100%;
                padding : 10px;
                height  : 180px;
                color   : #444;
                position: relative;
                overflow: hidden;



                .profile {
                    position: absolute;
                    top     : 10px;
                    left    : 0;
                    height  : 180px;
                    width   : 180px;
                    padding : 30px;

                    img {
                        height         : 100%;
                        border-radius  : 50%;
                        padding        : 2px;
                        border         : 1px solid #444;
                        object-fit     : cover;
                        object-position: center;
                    }
                }

                .text {
                    width        : 100%;
                    height       : 100%;
                    margin-left  : 170px;
                    padding-top  : 30px;
                    text-overflow: ellipsis;

                    .title {
                        font-size    : 26px;
                        font-weight  : bold;
                        margin-bottom: 5px;
                    }

                    .desc {
                        font-size: 18px;
                        display: block;
                    }
                }

                hr {
                    position        : absolute;
                    bottom          : 0;
                    left            : 0;
                    width           : 33%;
                    margin          : 0 33%;
                    border          : none;
                    height          : 1px;
                    background-color: rgba(68, 68, 68, 0.25);
                }
            }

            @media (max-width:420px) {
                .list-item {
                    height : 130px;
                    padding: 20px;

                    .profile {
                        height       : 150px;
                        width        : 150px;
                        padding-left : 10px;
                        padding-right: 50px;
                    }

                    .text {
                        margin-left: 100px;
                        padding-top: 12px;
                        word-break : break-all;

                        .title {
                            font-size    : 20px;
                            margin-bottom: 4px;
                        }

                        .desc {
                            font-size    : 14px;
                            width        : 70%;
                            text-overflow: ellipsis;
                            height: 60px;
                            line-height: 20px;
                            overflow: hidden;
                            // white-space: nowrap;
                        }
                    }
                }


            }
        }
    }
}